<template>
    <div>
        <h1>员工工资明细（弃用）</h1>
        <el-form :model="formDate" ref="form" :rules="rules" label-width="80px" :inline="true">
            <el-form-item label="工号">
                <el-input></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="loadData">查询</el-button>
                <el-button @click="toInsert" type="primary">新增</el-button>
            </el-form-item>
        </el-form>
        
        <el-table :data="page.records" border stripe>
            <el-table-column type="index" width="50" />
            <el-table-column v-for="col in columns"
                :prop="col.id"
                :key="col.id"
                :label="col.label"
                :width="col.width">
            </el-table-column>
            <el-table-column>
                <template #default="scope">
                    <el-button v-perm:system:permission:customer:update="toUpdate" type="primary"  :row="scope.row">编辑</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-pagination
            @current-change="loadData" 
            v-model:currentPage="page.current" 
            :page-sizes="[2, 4, 6, 8,10]" 
            :page-size="page.size"
            :total="page.total" background>
        </el-pagination>
        <el-dialog
            :destroy-on-close="true"
            :title="title"
            v-model="isVisible"
            width="60%">
            <span></span>
            <template #footer>
            <span>
                <router-view @ref-table="refTable" :data="data"></router-view>
            </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref } from 'vue'
import request from '@/api/request.js'
import router from '@/router'

//判断是否显示弹窗
let isVisible = ref(false)

let title=ref("");

let refTable=()=>{
    isVisible.value = false
    loadData();
}

//新增
let toInsert = (route) => {
    isVisible.value = true
    router.push("/salary/details/insert")
}
let data = ref({})

//编辑
let toUpdate = (route,row) => {
    data.value = row
    isVisible.value = true
    router.push("/salary/details/update")
}

const page = ref({
    current: 1,
    size:10,
    total: 0,
    records: []
})
const columns = [
    { id: 'empId', label: '员工工号' },
    { id: 'empName', label: '员工姓名'},
    {id:'postName', label: '岗位'},
    {id:'year', label: '薪资所属年份'},
    {id:'month', label: '薪资所属月份'},
    {id:'baseSalary' , label: '基本工资'},
    {id:'postSalary', label: '补贴'},
    {id:'performanceBasedPay',label: '绩效奖金'},
    {id:'seniorityWages', label: '公积金基数'},
    {id:'all', label: '当月累计薪资所得'},
    {id:'trans', label: '当月累计缴纳个税'},
    {id:'socialSecurity', label: '当月累计缴纳社保'},
    {id:'social', label: '当月累计缴纳公积金'},
    {id:'money', label: '当月实发'},
    {id:'atictime', label: '提交时间'},
    {id:'outtime', label: '更新时间'},
    {id:'IssuanceStatus', label: '流程状态'},
]
let formData = ref({})
</script>

<style scoped>

</style>
